<template>
  <div class="feedback-container">
    <ul class="feedback-box scroll-box">
      <li>
        <p class="tag-name required">标题</p>
        <van-field
          v-model="title"
          placeholder="限输入2-20个文字"
          :error-message="(title && title.length > 2) ? '' : titleError"
          maxlength="20"
        />
      </li>
      <li @click="showType = true">
        <p class="tag-name required">类型</p>
        <div class="tag-content type-tag">
          <span v-if="typeName">{{ typeName }}</span>
          <span
            class="color-gray"
            v-else
          >请选择</span>
          <van-icon name="arrow" />
        </div>
      </li>
      <li>
        <p class="tag-name required">内容</p>
        <div class="tag-content">
          <van-field
            v-model="content"
            rows="5"
            autosize
            type="textarea"
            placeholder="请输入内容"
            :error-message="content ? '' : contentError"
            maxlength="1000"
            show-word-limit
          />
        </div>
      </li>
      <li>
        <p class="tag-name">图片</p>
        <p class="tag-hint">图片不大于2M,最多不能超过5张</p>
        <div class="tag-content img-box">
          <van-uploader
            v-model="fileList"
            :after-read="afterRead"
            :max-count="5"
            @delete="deleteFn"
          />
        </div>
      </li>
    </ul>

    <div class="operate-box border-top">
      <van-button
        type="primary"
        block
        @click="submitFn"
      >确 定</van-button>
    </div>

    <van-action-sheet
      v-model="showType"
      :actions="actions"
      description="类型"
      cancel-text="取消"
      close-on-click-action
      @select="onSelect"
    />
  </div>
</template>

<script>
import { Field, Button, Icon, ActionSheet, Uploader } from 'vant';
import { uploadFile, submitFeedBack } from '@/api/common.js';

export default {
  name: 'Feedback',
  components: {
    [Field.name]: Field,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [ActionSheet.name]: ActionSheet,
    [Uploader.name]: Uploader
  },
  data() {
    return {
      title: '',
      content: '',
      titleError: '',
      contentError: '',
      showType: false,
      typeName: '',
      typeValue: '',
      actions: [
        { name: '建议', value: 1 },
        { name: '异常', value: 2 }
      ],
      fileList: [],
      imgs: []
    };
  },
  methods: {
    // 选择选项
    onSelect(action) {
      this.typeName = action.name;
      this.typeValue = action.value;
    },
    // 上传图片
    afterRead(file) {
      file.status = 'uploading';
      file.message = '上传中...';

      let formFile = new FormData();
      formFile.append('file', file.file);
      uploadFile(formFile).then(res => {
        if (res.status === 200) {
          file.status = 'done';
          this.imgs.push({
            name: file.file.name,
            url: res.data.path
          });
        } else {
          file.status = 'failed';
          file.message = '上传失败';
        }
      });
    },
    // 删除图片
    deleteFn(file) {
      console.log('deleteFn---', file);
      let fileName = file.file.name;
      this.imgs.map((item, index) => {
        if (item.name === fileName) {
          this.imgs.splice(index, 1);
        }
      });
      console.log(this.imgs);
    },
    // 提交
    submitFn() {
      if (!this.title) {
        this.titleError = '请输入标题';
        return;
      }
      if (this.title.length < 2) {
        this.titleError = '标题最少输入2个字';
        return;
      }
      if (!this.typeValue) {
        this.$toast({
          message: '请选择类型',
          duration: 1500
        });
        return;
      }
      if (!this.content) {
        this.contentError = '请输入内容';
        return;
      }

      let images = '';
      if (this.imgs.length) {
        let imgArr = [];
        this.imgs.map(item => {
          imgArr.push(item.url);
        });
        images = imgArr.join(',');
      }

      submitFeedBack({
        title: this.title,
        type: this.typeValue,
        content: this.content,
        image: images,
        file_name: '',
        file_path: ''
      }).then(res => {
        this.$toast({
          message: '感谢您的反馈',
          onClose: () => {
            this.$router.back();
          }
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.feedback-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: #fff;

  .feedback-box {
    flex: 1;
    padding: 0.106667rem 0.426667rem 0;

    > li {
      margin-top: 0.106667rem;
      border-bottom: 1px solid var(--border-color);

      .tag-name {
        padding: 0.32rem 0;
        color: var(--color-deep-gray);
        font-size: 0.346667rem;

        &.required {
          position: relative;

          &::before {
            content: '*';
            color: #f56c6c;
          }
        }
      }

      .tag-hint {
        color: var(--color-gray);
        font-size: 0.32rem;
      }

      .tag-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.373333rem;

        &.type-tag {
          padding: 0.32rem 0;
        }

        .van-icon {
          color: var(--color-gray);
        }

        &.img-box {
          padding: 0.32rem 0;

          > li {
            width: 2.133333rem;
            height: 2.133333rem;

            &.default-li {
              display: flex;
              justify-content: center;
              align-items: center;
              border: 1px solid var(--border-color);

              .van-icon {
                color: var(--color-gray);
                font-size: 0.64rem;
              }
            }
          }
        }
      }

      .van-field {
        padding-left: 0;
        padding-right: 0;
      }
    }
  }

  .operate-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 1.493333rem;
    padding: 0.213333rem 0.426667rem;
    background-color: #fff;

    .van-button {
      border-color: var(--color-primary);
      background-color: var(--color-primary);
    }
  }
}
</style>